<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
	<head>
		<meta charset="UTF-8" />
		<title>操作 用户</title>
		<link rel="stylesheet" th:href="@{/moon/css/bootstrap2.css}" />
		<link rel="stylesheet" th:href="@{/menu/metisMenu.css}" />
		
	</head>

	<body class="bg-pm"> 
		
		<div class="container-fluid" style="overflow: hidden;" id="app">
		
			<!-- 数据显示 -->
			<div class="row">
				<div class="col">
				
				<center><h2 style="margin-top:10px" >用户列表</h2></center>
				<br>
				
				<!-- 条件搜索表单 -->
				<div class="form-inline float-right mb-3">
					<input type="text" class="form-control form-control-sm " 
						   placeholder="账户名" id="uName" style="margin:5px" />
					<input type="text" class="form-control form-control-sm ml-1"
						   placeholder="邮箱" id="uEmail" style="margin:5px" />
					<input type="text" class="form-control form-control-sm ml-1"
						   placeholder="手机号" id="uPhone" style="margin:5px" />
					<input type="text" class="form-control form-control-sm ml-1"
						   placeholder="身份证号" id="uIdcard" style="margin:5px" />	 
					<input v-if="1==2" type="text" class="form-control form-control-sm ml-1"
						   placeholder="注册时间" id="uTime" style="margin:5px" />  
					<button class="btn btn-sm btn-info"  @click="showdata(true); ">筛选</button>
				</div>
				
				<!-- 数据显示区域 -->
				<div class="mt-2">
					
					<!-- 以列表形式显示普通用户 -->
					<table class="table table-hover">
						<tr>
							<th>UId</th>
							<th>账户</th>
							<th>邮箱</th>
							<th>手机号</th>
							<th>用户状态</th>
							<th>账户状态</th>
							<th>注册时间</th>
							<th>操作</th>
						</tr>
						
						<tr v-for="(au,index) in user">
							<td>{{index+1+(pageNum-1)*pageSize}}</td>
							<td>{{au.uname}}</td>
							<td>{{au.email}}</td>
							<td>{{au.tel}}</td>
							<td>{{au.userstatus}}</td>
							<td v-bind:name="au.uid">{{au.accountstatus}}</td>
							<td>{{au.utime  | dateFormat('YYYY-MM-DD')}}</td>
							<td> 
								<button class="btn btn-sm btn-outline-info mr-1" @click="goUpdateUser(au.uid);">修改</button>
								
								<button v-bind:id=au.uid class="btn btn-sm btn-outline-danger mr-1" v-if="au.accountstatus=='禁止登录'"  @click="updateAccountStatus(au.uid,$('[name='+au.uid+']').html())">开启登录</button>
								<button v-bind:id=au.uid class="btn btn-sm btn-outline-danger mr-1" v-else-if="au.accountstatus=='已注销'" disabled >已注销</button>
								<button v-bind:id=au.uid class="btn btn-sm btn-outline-danger mr-1" v-else="" @click="updateAccountStatus(au.uid,$('[name='+au.uid+']').html())">禁止登录</button>
								<shiro:hasRole name="1">
								<button class="btn btn-sm btn-outline-danger" @click="deleteUser(au.uid);">删除</button>
								</shiro:hasRole>
							</td>
						</tr>
					</table>
					
					<!-- 不要忘记清除浮动 -->
					<div class="clearfix"></div>
					
					<!-- 底部分页栏 -->
					<div class="mt-2">
						<div id="pager" class="pagination"></div>
					</div>
			
				</div>
			</div>
			</div>
			
			
		<!-- JS -->
		<script th:src="@{/moon/js/jquery.js}"></script>
		<script th:src="@{/moon/js/vue.js}"></script>
		<script th:src="@{/layer/layer.js}"></script>
		<script th:src="@{/page/jqpaginator.js}"></script>
		<script th:inline="javascript">
			
			//新进入页面时，默认显示第一页
			var pageNum = 1;

			//app.studentdata是数组[]类型
			var app = new Vue({
				el : "#app",
				data : { 
					user : [] ,
					pageNum : 1 ,
					pageSize : 4
				},
				filters : {
					
					dateFormat : function(dateStr,time){
						
						var date = new Date(dateStr);               
						var year = date.getFullYear();                            
						var month = date.getMonth()+1<10 ? '0'+ (date.getMonth()+1) : date.getMonth()+1;  
						var day = date.getDate()<10 ? '0' + date.getDate() : date.getDate();                
						var hh = date.getHours()<10 ? '0' + date.getHours() : date.getHours();                
						var mm = date.getMinutes()<10 ? '0' + date.getMinutes() : date.getMinutes();                
						var ss = date.getSeconds()<10 ? '0' + date.getSeconds() : date.getSeconds();                 
						if(time&&time.toLowerCase() === 'yyyy-mm-dd'){
		                    return `${year}-${month}-${day}`;
		                }else if(time&&time.toLowerCase() === 'hh:mm:ss'){
		                    return `${hh}:${mm}:${ss}`;
		                }else{
		                    return `${year}-${month}-${day} ${hh}:${mm}:${ss}`;
						}
					}
					
				},
				methods : {    

					showdata : function(f) {
						if(f){
							pageNum=1;
							$("#pager").jqPaginator(
								"option", 
								{ currentPage: 1 }
							);	
						}
						
						$.post("/auction/User/userSelectByCond", {
							uName : $("#uName").val(),
							uEmail : $("#uEmail").val(),
							uPhone : $("#uPhone").val(),
							uIdcard : $("#uIdcard").val(),
							pageNum : pageNum,
							pageSize : 4
						}, function(data) {
							//alert(JSON.stringify(data.list));
							app.user = data.list;
							app.pageNum = 1;
							//alert(JSON.stringify(app.admin));
							//修改totalPages
							$("#pager").jqPaginator(
								"option", 
								{ totalPages : data.pagecount }
							);
						}); 
					},
					deleteUser : function(uId){	
						if(confirm("确认删除？")){
							$.post("/auction/User/deleteUserById", 
									{ uId : uId }, 
									function(data) {
										if(data=="true"){
											alert("删除成功");
											location.href="/auction/Admin/adminiframe/selectUserByCond";
										}else
											alert("删除失败");
									});
						}
					},
					goUpdateUser : function(uId){
						location.href="/auction/User/goUpdateUser?uId="+uId;
					},
					updateAccountStatus : function(uId,value){
						
						$.post(
							"/auction/User/updateAccountStatus", 
							{ 
								uId : uId,
								value : value
							}, 
							function(data) {
								if(data=="正常"){
									alert("操作成功");
									$('#'+uId).html("禁止登录");
									$('[name='+uId+']').html(data);
								}else if(data=="禁止登录"){
									alert("操作成功");
									$('#'+uId).html("开启登录");
									$('[name='+uId+']').html(data);
								}else{
									alert("操作失败");
								}
							}
						);
					}
				}
			});
 
			//初始化分页
			//实时setpager
			//程序由上至下执行，所以app.showdata();必须写在上面，否则拿不到数据
			$("#pager").jqPaginator({
				totalPages : 1,
				currentPage : 1,
				onPageChange : function(num, type) {
					app.pageNum = num;
					pageNum = num;
					app.showdata(false);
				}
			});
			
		</script>
		
		</div>
		
	</body>
</html>